<template>
    <el-card class="box-card scroll-item" t shadow="always">
        <div slot="header" class="d-flex align-items-center">
           <i class="iconfont icon-tags"></i>
            <span>标签云</span>
            <!-- <el-button class="ml-auto" style="float: right; padding: 3px 0" type="text">
                <a @click="moreTags" class="me-pull-right me-tag-more">查看全部</a>
            </el-button> -->
        </div>
        <div class="text item">
            <!-- <el-tag type="success" v-for="t in tags" :key="t.id" size="small" class="tag-item" @click="tag(t.id)">{{t.name}}</el-tag> -->
            <tag-cloud :data="tags" @clickTag="clickTagItem"></tag-cloud>
        </div>
    </el-card>
</template>

<script>
import tagCloud from "@/components/TagCloud";
export default {
    name: 'TagsDom',
    components: {
        tagCloud
    },
    props: {
        tags: {
            type: Array,
            required: true
        }
    },
    data () {
        return {
            types:['', 'success', 'info', 'warning', 'danger'],
        }
    },
    methods: {
        moreTags() {
            this.$router.push('/tag/all')
        },
        tag(id) {
            this.$router.push({path: `/tag/${id}`})
        },
        clickTagItem (tag) {
            // console.log(tag)
            this.$router.push({path: `/tag/${tag.id}`})
        }
    }
}
</script>
<style lang="less" scoped>
.box-card{
    i{
        font-size: 20px;
        color :#437dff;
        font-weight: bold;
    }
        
    span{
        font-weight: bold;
    }
        
    .tag-item{
        cursor: pointer;
        margin: 4px 5px;
        font-weight:500 ;
    }
        
}
    
</style>